<template>
  <div class="w-full">
    <!-- banner -->
    <div class="swiper-box default-radius">
      <l-swiper :sList="swiperList">
        <template #default="{ data }">
          <div @click="onSwiper(data)">
            <!-- <span class="swiper-tips">{{ data.title }}</span> -->
            <img :src="data.img" alt="banner" class=" " />
          </div>
        </template>
      </l-swiper>
    </div>
    <!-- 消息 -->
    <div class="notice-box default-radius">
      <l-swiper :style="{ height: '40px' }" :sList="noticeList" :isPagination="false" :direction="'vertical'">
        <template #default="{ data }">
          <span>{{ data.title }}</span>
        </template>
      </l-swiper>
    </div>
    <!-- 文章 -->
    <div class="article-box">
      <div class="default-radius" v-for="item in articleList" :key="item.id">
        <card-article-item :item="item"></card-article-item>
      </div>
    </div>
    <div class="rounded-sm relative overflow-hidden flex justify-between group h-10 w-full cursor-pointer"
      @click="nextPageHandle()" v-if="articleList">
      <div class="skew-20 text-sm p-2 pl-4 -ml-2 flex-1 mr-2 box-bg-color h-full"></div>
      <div
        class="w-28 skew-20 text-sm h-full p-2 pr-4 -mr-2 cursor-pointer box-bg-color group-hover:bg-blue-400 group-hover:text-white">
      </div>
      <div class="flex justify-between absolute w-full h-full z-10 items-center group">
        <div class="text-sm p-2 pl-4 -ml-2 flex-1 mr-2">
          {{
            articleList.length > 0
            ? articleList.length + "/" + paging.total
            : ""
          }}
        </div>
        <div class="w-28 flex justify-center items-center text-sm p-2 pr-4 -mr-2 group-hover:text-white">
          {{ ["", "到底了", "更多数据"][paging.pageStatus] }}
          <el-icon class="ml-1 animate-bounce" v-if="paging.total != articleList.length">
            <ArrowDownBold />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDownBold } from "@element-plus/icons-vue";
// import { useTitle } from '@vueuse/core'
// useTitle('title')


// 消息通知
const resHot: any = await getNotice();
const noticeList = ref(resHot.data || [])

// 获取banner
const resBanner: any = await getBanner();
const swiperList = ref(resBanner.data);

// 文章
const queryParams = ref({
  page: 1,
  pageSize: 10
})
const articleList: any = ref([])
const paging: any = ref({
  total: 0,
  pageStatus: 2
})
const loadData = async function () {
  const resArticle: any = await getArticlePageList(queryParams.value);
  if (resArticle.data) {
    const { list, count } = resArticle.data
    articleList.value = resArticle.data.list
    paging.value.total = resArticle.data.count
    // 到底部  是否是最后一页
    if (Math.ceil(count/queryParams.value.pageSize) == queryParams.value.page) {
      paging.value.pageStatus = 1
    }

  }
}
loadData()
const nextPageHandle = ()=>{
  if(paging.value.pageStatus == 1){
return
  }
  queryParams.value.page ++
  loadData()
}
// // 分页一些方法
// const {getDataList, nextPageHandle,} = useCrud(state);
//
// // 设置为加载中
// state.pageStatus = 2
// // 获取文章
// await getDataList()


const onSwiper = (item: any) => {
  if (item.articleId) {
    // this.$router.
    window.location.href = '/detail/' + item.articleId
  }
  console.log(item)
}

</script>

<style scoped lang="scss">
$_color: #ffffff;
$_text-secondary: rgba(0, 0, 0, 0.5);
$bgColor: rgba(255, 255, 255, 0.8);

.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.default-radius {
  border-radius: 2px;
}

.swiper-box {
  height: 200px;
  background-color: var(--module-bg);

  img {
    object-fit: cover;
  }

  .swiper-tips {
    position: absolute;
    color: #fff;
    text-align: center;
    top: 0.5rem;
    font-size: 30px;
    right: 1rem;
  }
}

.notice-box {
  height: 40px;
  color: var(--el-menu-text-color);
  background-color: var(--module-bg);
  margin-top: 10px;
  line-height: 40px;
  padding: 0 10px;
}

.article-box {
  margin-top: 10px;
}


:deep(.swiper-pagination) .swiper-pagination-bullet {
  background-color: #fff;
}

:deep(.swiper-pagination) .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 20px;
}

:deep(.swiper-content) {
  min-height: 40px;
}

:deep(.swiper-content) img {
  width: 100%;
  height: 200px;
}

.swiper-slide-active .blur-vertical {
  animation: blurVertical 1s;
  animation-fill-mode: forwards;
}

.swiper-slide-active .blur-horizontal {
  animation: blurHorizontal 1.6s;
  animation-fill-mode: forwards;
}

@keyframes blurHorizontal {
  from {
    filter: url(@/assets/images/motion-blur.svg#horizontal);
  }

  to {
    filter: none;
  }
}

@keyframes blurVertical {
  from {
    filter: url(@/assets/images/motion-blur.svg#vertical-small);
  }

  to {
    filter: none;
  }
}
</style>
